import React, { useEffect, useState } from 'react'
import style from './style.module.scss'
import { Upload, Input, message } from 'antd'
import { useRecoilState } from 'recoil'
import { UserInfoMock } from './mock'
import { FileService } from '../../../transfer/service/FileService'
import { UserService } from '../../../transfer/service/UserService'

const { TextArea } = Input

export default function ProfileForm() {
    const [userName, setUserName] = useState('')
    const [userNick, setUserNick] = useState('')
    const [email, setEmail] = useState('')
    const [location, setLocations] = useState('')
    const [personalSite, setPersonalSite] = useState('')
    const [bio, setBio] = useState('')
    const [createTime, setCreateTime] = useState('')
    const [fileList, setFileList] = useState<any>([])
    const [head, setHead] = useState<any>()

    useEffect(() => {
        new UserService().getProfile(JSON.parse(localStorage.getItem('account') as any).id).then(res => {
            setHead(res.data.data.profile.avatar)
            setUserNick(res.data.data.profile.nickName)
            setUserName(res.data.data.username)
            setEmail(res.data.data.email)
            setLocations(res.data.data.profile.location)
            setPersonalSite(res.data.data.profile.personalSite)
            setBio(res.data.data.profile.intro)
            setCreateTime(res.data.data.createTime)
        })
        console.log()
    }, [])

    const handleUploader = (param: any) => {
        if (!param.file) {
            return false
        }

        let data = new FormData()
        data.append('files', param.file)

        console.log(fileList)
        // 上传文件使用的接口方法
        new FileService().uploadFile(data, 'avatar').then(res => {
            setHead('http://localhost:3000/' + res.data.data.url)
            console.log(res.data.data.url)
        })
    }

    const handleUpdateBtn = () => {
        const normalPattern = /^[\u4E00-\u9FA5A-Za-z0-9_]+$/
        const emailPattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        const webSitePattern = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/

        if (!normalPattern.test(userNick)) message.error('昵称只能由英文、中文或下划线组合。')
        if (!normalPattern.test(userName)) message.error('用户名只能由英文、中文或下划线组合。')
        if (!normalPattern.test(location)) message.error('地址只能由英文、中文组合。')
        if (!emailPattern.test(email)) message.error('邮箱输入错误。')
        if (!webSitePattern.test(personalSite)) message.error('地址摄入错误。')

        if (
            !normalPattern.test(userNick) &&
            !normalPattern.test(userName) &&
            !normalPattern.test(location) &&
            !emailPattern.test(email) &&
            !webSitePattern.test(personalSite)
        ) {
            new UserService().updateProfile(JSON.parse(localStorage.getItem('account') as any).id, {
                id: JSON.parse(localStorage.getItem('account') as any).id,
                nickName: userNick,
                avatar: head,
                location: location,
                intro: bio,
                personalSite: personalSite,
                createTime: createTime,
                updateTime:
                    new Date().toLocaleDateString() +
                    ' ' +
                    new Date().toTimeString().replace(' GMT+0800 (中国标准时间)', '')
            })
        }
    }

    return (
        <div className={style.container}>
            <div className={style.item}>
                <span>用户资料</span>
                <div className={style.profile}>
                    <div className={style.profile__head}>
                        <img src={'http://localhost:3000/' + head} />
                        <Upload
                            className={style.sub__btn}
                            customRequest={handleUploader}
                            showUploadList={false}
                            onChange={({ fileList: newFileList }) => setFileList(fileList)}>
                            <a>上传头像</a>
                        </Upload>
                    </div>
                    <div className={style.profile__info}>
                        <div className={style.info__item}>
                            <span className={style.title}>昵称</span>
                            <input
                                type={'text'}
                                value={userNick}
                                onChange={e => {
                                    setUserNick(e.target.value)
                                }}
                            />
                        </div>
                        <div className={style.info__item}>
                            <span className={style.title}>邮箱地址</span>
                            <input
                                type={'text'}
                                value={email}
                                onChange={e => {
                                    setEmail(e.target.value)
                                }}
                            />
                        </div>
                        <div className={style.info__item}>
                            <span className={style.title}>用户名</span>
                            <input
                                type={'text'}
                                value={userName}
                                onChange={e => {
                                    setUserName(e.target.value)
                                }}
                            />
                            <span className={style.intro}>https://lineview.com/@{userName}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div className={style.item}>
                <span>关于自己</span>
                <div className={style.about}>
                    <div className={style.about__item}>
                        <div className={style.item__content}>
                            <span className={style.title}>地点</span>
                            <input
                                type={'text'}
                                value={location}
                                onChange={e => {
                                    setLocations(e.target.value)
                                }}
                            />
                        </div>
                        <div className={style.item__content}>
                            <span className={style.title}>个人网站</span>
                            <input
                                type={'text'}
                                value={personalSite}
                                placeholder={'https://'}
                                onChange={e => {
                                    setPersonalSite(e.target.value)
                                }}
                            />
                        </div>
                    </div>
                    <div className={style.about__item}>
                        <div className={style.item__personal}>
                            <span className={style.title}>个人经历</span>
                            <TextArea
                                className={style.text__area}
                                rows={4}
                                maxLength={250}
                                value={bio}
                                onChange={e => {
                                    setBio(e.target.value)
                                }}
                            />
                        </div>
                        {/*<div className={style.item__content}>*/}
                        {/*    <span className={style.title}>兴趣</span>*/}
                        {/*    <input*/}
                        {/*        type={'text'}*/}
                        {/*        value={interests}*/}
                        {/*        placeholder={'添加标签，功能暂时未完'}*/}
                        {/*        onChange={e => {*/}
                        {/*            setInterests(e.target.value)*/}
                        {/*        }}*/}
                        {/*    />*/}
                        {/*    <span className={style.intro}>你喜欢、收集和贡献的照片类型。</span>*/}
                        {/*</div>*/}
                    </div>
                </div>
            </div>
            {/*<div className={style.item}>*/}
            {/*    <span>社交网站</span>*/}
            {/*    <div className={style.social}>*/}
            {/*        <div className={style.social__item}>*/}
            {/*            <div className={style.item__content}>*/}
            {/*                <span className={style.title}>微博昵称</span>*/}
            {/*                <input*/}
            {/*                    type={'text'}*/}
            {/*                    value={socialName}*/}
            {/*                    onChange={e => {*/}
            {/*                        setSocialName(e.target.value)*/}
            {/*                    }}*/}
            {/*                />*/}
            {/*                <span className={style.intro}>这样子我们就可以在你的信息页中访问</span>*/}
            {/*            </div>*/}
            {/*        </div>*/}
            {/*    </div>*/}
            {/*</div>*/}
            <div
                className={style.btn}
                onClick={() => {
                    handleUpdateBtn()
                }}>
                <span>上传资料</span>
            </div>
        </div>
    )
}
